<?php
$this->Html->addCrumb('Homepage Photos','/admin/homepagePhotos');
$this->Html->scriptStart(array('inline' => false));
echo '
      $(function(){
       $(".deleteLink").click(function(event){
        var $link = $(this);
        $.TWS_Overlay("confirm", {title : "Delete confirmation", message : "Are you sure you want to delete this photo?", buttons : {ok :{onclick : function () { $.TWS_Overlay("hide"); location.href=$link.attr("href");}}}});
        event.preventDefault();
      });     
      $(".displayContent").cluetip({splitTitle: "|", cluetipClass: "tws", dropShadow : false, positionBy : "mouse", cursor : "default"});
  
        //Initialization for edit form here
        $(".editRecord").click(function(){
          $.TWS_Overlay("show");
          var $tr = $(this).parents("tr");
          var imgSrc= $tr.find("img.photo").attr("src");
          imgSrc = imgSrc.replace(/thumb_/g,"");
          var imgCaption = $tr.find("td[data-role=caption]").text();
          $("#photoCaption").val(imgCaption || "");
          var photoId = $tr.find("td[data-role-id]").attr("data-role-id");
          $("#photoId").val(photoId);
          var previousImg = $("#photoDisplay").attr("src");
          $("#photoDisplay").attr("src",imgSrc);
          if (previousImg === imgSrc) {
            completeEditInit();
          } else {
            $("#photoDisplay").load(function() {
              completeEditInit();
            });
          }
          return false;
        });

        function completeEditInit(imgCaption) {
            $( "#editPhotoSection" ).dialog({modal: true, width:725, title :"Edit photo caption"});
            $.TWS_Overlay("hide");
        }
        
        $("#photoEditCancelButton").click(function(){
          $( "#editPhotoSection" ).dialog("close");
          return false;
        });

          $("#photoForm").ajaxForm( {
            url : "' . $this->Html->url(array("action"=>"edit_ajax", "controller"=>"homepagePhotos", "admin"=>true)).'",
            type : "POST", //This should be set on the form element
            beforeSubmit:  function(arr, $form, options) {
              $.TWS_Overlay("side");
            },
            dataType : "json",
            success : function(response, statusText, xhr, elem) {
              if (response && response.result.success) {
              $( "#editPhotoSection" ).dialog("close");
                var result = response.result;
                var caption = result.data.HomepagePhoto.caption.replace(/\n/g,"<br/>");
                $("td.photoColumn[data-role-id="+ result.id+ "]td + td[data-role=caption]").html(caption);
                //TODO - Also store main album photo as well
                $.TWS_Overlay("hide");
                
              } else if (response && !response.result.success) {
                $.TWS_Overlay("error", {title : "Error", message: response.message || "The action was not successful. Please try again."});
              }
            },
            error : function (response) {
              //standard ajax error
             $( "#editPhotoSection" ).dialog("close");
             $.TWS_Overlay("error", {title : "Error", message:"<p>An error occurred when the form was submitted"+(response.responseText || "")+"</p><p>Please try again.</p>"});
            },
            resetForm : true,
            clearForm : true,
            iframe : true
          }
        );
        $("#photoEditSbmtButton").click(function(){
          $("#photoForm").submit();
        });

  });
       ';
$this->Html->scriptEnd();
?>
<h1>Homepage Photos</h1>
<p>These photos rotate on the Homepage of the Website.</p>
<?php echo $this->Session->flash();?>
<div class="buttonSet">
<?php echo '<div>'.$this->Html->link('Add Photo', array('controller' => 'HomepagePhotos', 'action' => 'add'), array('class'=>'buttonLink')).'</div>'; ?>
<?php echo '<div>'.$this->Html->link('Add Multiple Photos', array('controller' => 'HomepagePhotos', 'action' => 'add_multiple'), array('class'=>'buttonLink')).'</div>'; ?>
</div>
<?php if (empty($photos)) { echo '<p>No Photos are currently available.</p>'; }
 else {
  ?>
<?php echo '<div>'.$this->Paginator->counter(array('format' => '%count% Total Record(s)')).'</div>'; ?>
   <table class="results photoList" >
    <thead>
      <tr>
        <th width="25%">Image</th>
        <th width="55%"><?php echo $this->Paginator->sort('caption','Caption')?></th>
        <th width="20%">Actions</th>
      <tr>
   </thead>
   <tbody>
      <?php foreach ($photos as $photo) {
        $rec = $photo['HomepagePhoto'];
        $editLink = $this->Html->link('Edit', array('controller' => 'homepagePhotos', 'action' => 'edit', $rec['id']), array("title"=>"Edit this record", 'class'=>'editRecord'));
        $deleteLink = $this->Html->link('Delete', array('controller' => 'homepagePhotos', 'action' => 'delete', $rec['id']), array("title"=>"Delete this record", "class"=>'deleteLink'));
        $caption = $rec['caption'];
        $modified = new DateTime($rec['modified']);
        echo '<tr>';
        echo '<td class="photoColumn" data-role-id="'.$rec['id'].'">'.$this->Html->image($rec['image_thumb_path'], array('title'=>'Homepage photo', 'class'=>'photo')).'</td>';
        echo '<td data-role="caption">'.nl2br($caption).'</td>';
        echo "<td>$editLink&nbsp;&nbsp;$deleteLink</td>";
        echo '</tr>';
      }?>
   </tbody>
   </table>
  
<?php echo $this->element('pagination'); ?>

<div id="editPhotoSection">
  <div id="photoSection">
    <img src="" id="photoDisplay" alt="Album Photo" title="Album Photo" class="photo" />
  </div>
  <div id="photoCaptionSection">
    <form id="photoForm" method="post" action="" class="inlineForm">
      <div class="row">
      <textarea id="photoCaption" class="photoCaption" name="photoCaption" rows="5" cols="45">This is some text here for the caption</textarea>
      <input type="hidden" id="photoId" name="photoId"/>
      </div>
      <div class="row">
      <input type="button" class="button" id="photoEditSbmtButton" name="photoEditSbmtButton" value="Save"/>
      <input type="button" class="button" id="photoEditCancelButton" name="photoEditCancelButton" value="Cancel"/>
      </div>
    </form>
  </div>
</div>

 <?php } ?>

